<template>
  <view class="page-bg transferBalance">
	<uni-forms ref="form" :modelValue="form" :rules="rules">
		<view class="main-container">
			<uni-forms-item class="forms-box-s" name="amount">
				 <view class="tl-panel">
					<view class="tl-font-28-29">转账金额</view>
					<view class="input-box">
					  ¥ <input type="text" v-model="form.amount" :placeholder="`最大提现金额${userInfo.balance || 0}元`" placeholder-class="pch" class="input-value"/>
					</view>
					<view class="tl-font-28-9b">当前余额为 ¥ {{userInfo.balance || 0}}</view>
				 </view>
			</uni-forms-item>
		  <!-- <view class="tl-red tl-title-62">输入金额超过当前余额</view> -->
		  <view class="other-content">
		<!-- 	  <uni-forms-item class="forms-box-s" name="account">
				  <view class="details-box">
				  	<view class="label-">银行卡卡号</view><view class="right-value"><input v-model="form.account" class="uni-input-info-shopName" :focus="false" placeholder="请输入银行卡卡号" /></view>
				  </view>
			  </uni-forms-item> -->
			<uni-forms-item class="forms-box-s" name="mobile">
				<view class="details-box">
					<view class="label-">手机号</view><view class="right-value"><input class="form-item--input" type="number" v-model="form.mobile" maxlength="11" placeholder="请输入手机号"/></view>
				</view>
			</uni-forms-item>
			<uni-forms-item class="forms-box-s" name="account">
				<view class="details-box">
					<view class="label-">账户</view><view class="right-value"><input v-model="form.account" class="uni-input-info-shopName" :focus="false" placeholder="请输入账户" /></view>
				</view>
			</uni-forms-item>
		  </view>
		  <view class="tl-footer">
			<button class="tl-btn-686 tl-font-28-29" @click="onWithdrawal('form')">提交</button>
		  </view>
		</view>
	</uni-forms>
    <!-- 密码输入模态框 -->
    <!--      <u-popup v-model="show" mode="center" width="680rpx" height="630rpx" :closeable="true">
            <view class="tl-popup">
              <view class="title">输入支付密码</view>
              <view class="tl-font-28-9b tl-text-center">提现金额</view>
              <view class="tl-font-60-02 tl-text-center">¥ 100.00</view>
              <view class="tl-flex-row tl-line-down">
                <view>服务费</view>
                <view>¥ 0.00 <text class="tl-font-24-9b ml-12">¥0.2</text></view>
              </view>
              <view>
                <u-message-input :focus="true" :maxlength="6" @change="change" @finish="finish"></u-message-input>
              </view>
            </view> -->
    <!--        <view class="tl-flex-row-2" @click="show = false">
              <view class="tl-btn-250 tl-font-36-56">取消</view>
            </view>-->
          <!-- </u-popup> -->
  </view>
</template>

<script>
	import * as UserApi from '@/api/user'
	export default {
	  data() {
		return {
		  items: [{
			id: 0,
			icon: 'https://oss.goin-tech.com/files/202106/a8406c5d861dd805c675d0d49fb782c7.png',
			title: '支付宝',
		  },{
			id: 1,
			icon: 'https://oss.goin-tech.com/files/202106/19f640642f01c2105da79d01401f0393.png',
			title: '微信',}
		  ],
		  current: 0,
		  show: false,
		  color: "color: #B8B8B8",
		  form: {
			  amount: '', // 金额
			  account: '', // 账户
			  mobile: '',// 手机号
		  },
		  rules: {
		  	// 对store_name字段进行必填验证
		  	amount: {
		  		rules: [{
		  			required: true,
		  			errorMessage: '请输入金额',
		  		},{
					format: 'number',
					errorMessage: '金额请输入数字'
				}]
		  	},
			mobile: {
				rules: [{
					required: true,
					errorMessage: '请输入手机号',
				},{
					validateFunction:function(rule,value,data,callback){
						const reg = /^(1[3456789]\d{9})$/
						if (!value) {
							callback('请输入手机号')
						}else if (!reg.test(value)) {
							callback('请输入正确格式的手机号')
						}
						return true
					}
				}]
			},
			account: {
				rules: [{
					required: true,
					errorMessage: '请输入账户',
				}]
			}
		  },
		  // 会员信息
		  userInfo: {}
		}
	  },
	  /**
	   * 生命周期函数--监听页面显示
	   */
	  onShow(options) {
	    this.getUserInfo()
	  },
	  methods: {
		// 获取用户信息
		getUserInfo() {
			let app = this
			UserApi.info({}, { load: false }).then(result => {
			    app.userInfo = result.data.userInfo
			})  
		},
		change(e) {
		  console.log('内容改变，当前值为：' + e);
		},
		finish(e) {
		  console.log('输入结束，当前值为：' + e);
		},
		onWithdrawal(ref) {
			let that = this
			this.$refs[ref].validate().then(res => {
				console.log('res', res,this.form);
				// this.show = true
				UserApi.transferBalance(that.form, { load: false }).then(result => {
				    console.log(result)
					uni.showToast({
						title: '提交成功'
					})
					setTimeout(() => {
						uni.reLaunch({
							url:'/pages/user/index'
						})
					},2000)
				})
			}).catch(err => {
					console.log('err', err);
			})
		}
	  }
	}
</script>

<style lang="less">
.page-bg {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-size: 750rpx auto;
  background-color: #F7F7F7;
}

.main-container {
  width: 686rpx;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  margin-top: 36rpx;
}
.tl-panel{
  width: 686rpx;
  height: 296rpx;
  padding: 32rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
}
.tl-font-28-29{
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #292929;
}
.tl-font-28-9b{
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9B9B9B;
  margin-top: 18rpx;
}
.tl-font-32-29{
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #292929;
}
.input-box {
  height: 100rpx;
  width: 650rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 60rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #43413C;
  opacity: 1;
  border-bottom: 2rpx solid #E7E9EE;;
}
.input-box .input-value {
  flex: 1 auto;
  margin-left: 10rpx;
  height: 80rpx;
}

.tl-flex-row{
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
}
.tl-panel-2{
  width: 686rpx;
  padding: 32rpx;
  background: #FFFFFF;
  border-radius: 8rpx;
}
.tl-title-60{
  margin: 30rpx 0 20rpx 0;
}

.tl-title-62{
  margin: 25rpx 0 30rpx 0;
}

.tl-panel-card{
  width: 194rpx;
  height: 136rpx;
  line-height: 136rpx;
  background: #F7F7F7;
  border-radius: 8rpx;
}
.active{
  background: #FEF5DD;
  border-radius: 8rpx;
  font-size: 32rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #F2C827;
}

.tl-footer{
  margin-top: 120rpx;
}
.tl-btn-686{
  width: 686rpx;
  height: 88rpx;
  line-height: 88rpx;
  background: #fa2209;
  color: #fff;
  border-radius: 8rpx;
}
.tl-blue{
  font-size: 28rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2793F2;
}

.tl-img-76{
  width: 76rpx;
  height: 76rpx;
  border-radius: 38rpx;
}
.tl-red{
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #E04646;
}


/*** 模态框  ***/
.tl-flex-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.tl-line-down{
  border-bottom: 2rpx solid #EAEAEA;
  margin: 60rpx 0 20rpx 0;
  padding-bottom: 30rpx;
}

.tl-popup{
  padding: 0 32rpx;
  height: 470rpx;
  .title{
    padding: 24rpx;
    text-align: center;
  }
  .tl-font-28-a5{
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #A5A5A5;
    margin-top: 12rpx;
  }
  .tl-btn-view{
    margin: 40rpx 0 32rpx 0;
  }
  .tl-yellow-500{
    width: 500rpx;
    height: 72rpx;
    line-height: 72rpx;
    background: #F2C827;
    border-radius: 44rpx;
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #303030;
  }
}
.tl-line-16{
  width: 748rpx;
  height: 16rpx;
  background: #F7F7F7;
}
.tl-flex-row-2{
  display: flex;
  justify-content: center;
  align-items: center;
}
.tl-btn-250{
  padding-top: 32rpx;
  background: #fff;
}
.tl-font-36-56{
  font-size: 36rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #565656;
}
.tl-font-60-02{
  font-size: 60rpx;
  font-family: DINAlternate-Bold, DINAlternate;
  font-weight: bold;
  color: #020202;
}
.tl-font-24-9b{
  font-size: 24rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9B9B9B;
}
.ml-12{
  margin-left: 12rpx;
}

.tl-text{
  width: 450rpx;
  display: -webkit-box; /*弹性伸缩盒子模型显示*/
  -webkit-box-orient: vertical; /*排列方式*/
  -webkit-line-clamp: 1; /*显示文本行数(这里控制多少行隐藏)*/
  overflow: hidden; /*溢出隐藏*/
}
.tl-text-center{
  text-align: center;
}
.other-content{
	background: #FFFFFF;
	padding: 32rpx 32rpx 0 32rpx;
	border-radius: 8rpx;
}
.details-box{
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 75rpx;
	border-bottom: 2rpx solid #F4F4F4;
	background: #FFFFFF;
}
.label-{
	color: #161616;
	flex: 1;
	margin-right: 46rpx;
	// text-align-last: justify;
	font-weight: 600;
}
.right-value{
	font-family: MicrosoftYaHei;
	color: #A8A8A8;
	flex:3;
}
.input-value .uni-input-placeholder,.right-value .uni-input-placeholder{
	font-size: 28rpx;
}
</style>